<template>
  <view class="page">
    <template v-if="messageList.length > 0 || loadMoreStatusText === 'loading'">
      <view class="message-list">
        <scroll-view class="scroll-view" v-for="item in messageList" :key="item.id" :scroll-x="true" :show-scrollbar="false" :enhanced="true">
          <view class="message-item" @click="itemClick(item)">
            <view class="left">
              <image :src="messageIcon" class="icon"></image>
            </view>
            <view class="right">
              <view class="send-time row">{{ item.publishTime }}</view>
              <view class="title row">{{ item.messageTitle }}</view>
              <view class="content row">{{ item.messageContent }}</view>
            </view>
            <!--					标记已读按钮（只有消息为未读时才展示）-->
            <view class="mark-has-read-btn" v-if="item.isRead === false">
              <view class="btn" @click.stop="markHasRead(item)">标记已读</view>
            </view>
            <!--				右上角小红点（只有消息为未读时才展示）-->
            <view class="red-point" v-if="item.isRead === false"></view>
          </view>
        </scroll-view>
      </view>
      <uni-load-more :status="loadMoreStatusText"></uni-load-more>
    </template>
    <empty v-else height="100vh"></empty>
  </view>
</template>

<script>
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import messageIcon from "./assets/message.png"
import request from "@/utils/request"
import { handleUrlParams } from "@/utils"
import empty from "@/components/empty.vue"
export default {
  components: {
    uniLoadMore,
    empty,
  },
  data() {
    return {
      messageList: [],
      loadMoreStatusText: "more",
      pagination: {
        size: 10,
        current: 1,
      },
      messageIcon,
    }
  },
  methods: {
    //获取下一页
    getList() {
      return new Promise((resolve, reject) => {
        if (["noMore", "loading"].includes(this.loadMoreStatusText)) {
          resolve()
          return
        }
        this.loadMoreStatusText = "loading"
        request({
          url: "notificationInfo/page",
          data: this.pagination,
          errorHandle: true,
        }).then((data) => {
          this.messageList.push(...data.records)
          if (this.messageList.length >= data.total) {
            this.loadMoreStatusText = "noMore"
          } else {
            this.loadMoreStatusText = "more"
          }
          resolve()
        })
      })
    },
    //重置分页并重新加载数据
    async refresh() {
      this.pagination.current = 1
      this.messageList = []
      this.loadMoreStatusText = "more"
      await this.getList()
    },
    // 标记为已读
    markHasRead(item) {
      request({
        url: "notificationInfo/updateIsRead",
        data: {
          id: item.id,
        },
      })
      item.isRead = true //因为没有刷新列表，所以手动修改状态
      this.$forceUpdate()
    },
    //通知公告点击事件
    itemClick(item) {
      switch (item.jumpType) {
        //跳转到别的小程序
        case "Applet":
          this.markHasRead(item)
          uni.navigateToMiniProgram({
            appId: item.appid,
            path: item.jumpPath,
          })
          break
        // 站内页面
        case "Instation":
          this.markHasRead(item)
          uni.navigateTo({
            url: item.jumpPath,
          })
          uni.switchTab({
            url: item.jumpPath,
          })
          break
        //跳h5页面
        case "H5":
          this.markHasRead(item)
          uni.navigateTo({
            url: handleUrlParams("/pages/web-view/web-view", {
              path: encodeURIComponent(item.jumpPath),
            }),
          })
      }
    },
  },
  async onLoad() {
    uni.showLoading({
      title: "加载中",
    })
    await this.getList()
    uni.hideLoading()
  },
  //下拉刷新
  async onPullDownRefresh() {
    await this.refresh()
    uni.stopPullDownRefresh()
  },
  //页面到达底部加载下一页
  onReachBottom() {
    this.pagination.current++
    this.getList()
  },
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: var(--background-color);
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: 30rpx;
  .message-list {
    padding: 0 30rpx;
    .scroll-view {
			margin-bottom: 30rpx;
      .message-item {
        display: flex;
        align-items: center;
        //border-bottom: 2rpx solid var(--border-color);
        padding: 20rpx 20rpx;
        position: relative;
        flex-wrap: nowrap;
        border-radius: 20rpx;
        background: var(--theme-color-light);

        .icon {
          width: 100rpx;
          height: 100rpx;
        }

        .right {
          margin-left: 30rpx;
          min-width: calc(100% - 110rpx);

          .row:not(:last-child) {
            margin-bottom: 14rpx;
          }

          .title {
            font-size: 36rpx;
            font-weight: bold;
            //文本溢出部分自动加省略号
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .content {
            font-size: 28rpx;
            color: var(--text-color-light);
          }

          .send-time {
            font-size: 28rpx;
            color: var(--text-color-light);
          }
        }

        .mark-has-read-btn {
          display: flex;
          align-items: center;

          .btn {
            background: #2979ff;
            color: #fff;
            padding: 20rpx 20rpx;
            border-radius: 10rpx;
            min-width: max-content;
          }
        }

        .red-point {
          position: absolute;
          right: 20rpx;
          top: 30rpx;
          width: 24rpx;
          height: 24rpx;
          border-radius: 50%;
          background: red;
        }
      }
    }
  }
}
</style>
